<template>
  <div class="header">
    <div class="headerContent">
      <img class="logo" src="@/assets/logotext.png" alt="拓诚学院" />
      <div class="headerRight">
        <div class="courseLink">
          <span
            v-for="(item, index) in menuList"
            :key="index"
            @click="linkPage(item)"
            >{{ item.title }}</span
          >
        </div>
        <div class="userInfo">
          <span class="userName">{{ userName }}</span>
          <span class="userIcon" @click="logout"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentView: "", // 当前渲染的组件
      menuList: [
        {
          title: "首页",
          component: "HomeBanner",
        },
        {
          title: "在线课堂",
          component: "Classroom",
        },
        {
          title: "课堂资源",
          component: "Course",
        },
        {
          title: "直播课程",
          component: "LiveClasses",
        },
        {
          title: "讲师列表",
          component: "ListInstructors",
        },
        {
          title: "学习中心",
          component: "StudyCentre",
        },
      ],
    };
  },
  methods: {
    linkPage(item) {
        this.$emit('ComponentLink', item)
    },
  },
};
</script>

<style lang="css" scoped>
.header {
  background-color: #fff;
  height: 60px;
  width: 100%;
}
.headerContent {
  width: 1200px;
  margin: 0 auto;
}
.logo {
  width: 152px;
  margin-top: 1px;
}
</style>